import React, { createElement, useEffect, useState } from 'react';
import { Comment, Tooltip, Avatar, Empty } from 'antd';
import moment from 'moment';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import myinfo from '../../mobx/info'
import { observer } from 'mobx-react';
import { baseURL } from '../../api/request';
import { ajax } from '../../api';
 function List() {
     const {finishList,getFinishListAsync,getFinishList} = myinfo
        const [likes, setLikes] = useState(0);
        const [dislikes, setDislikes] = useState<any>(0);
        const [action, setAction] = useState<any>(null);
        const typeList = [
          {
            text:'中国风',
            value:1,
          },
          {
            text:'简约风',
            value:2,
          },
          {
            text:'叙利亚风',
            value:3,
          },
          {
            text:'欧美风',
            value:4,
          },
          {
            text:'更多',
            value:5,
          }
        ]
          

     
        // const like =async () => {
        //   setLikes(1);
        //   setDislikes(0);
        //   setAction('liked')
        //   console.log(finishList);

        //  let {code,result} = await ajax.changeFinish({number:1})
        //   console.log(result);
        //   if(code==200){
              
        //    getFinishList({...JSON.parse(JSON.stringify(finishList)),liked:1})
        //    console.log({...finishList});
        
           
        //   }
      
        // };
      
        // const dislike = () => {
        //   setLikes(0);
        //   setDislikes(1);
        //   setAction('disliked');
        // };
      
        // const actions = [
        //   <Tooltip key="comment-basic-like" title="顶">
        //     <span onClick={like}>
        //       {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
        //       <span className="comment-action">{likes}</span>
        //     </span>
        //   </Tooltip>,
        //   <Tooltip key="comment-basic-dislike" title="不赞同">
        //     <span onClick={dislike}>
        //       {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
        //       <span className="comment-action">{dislikes}</span>
        //     </span>
        //   </Tooltip>,
        //   <span key="comment-basic-reply-to">Reply to</span>,
        // ]
    
     useEffect(()=>{
        getFinishListAsync({})
     },[])

     return (
         <div>
        {
            (finishList.length>0)?finishList.map((l: any,i: any)=>(
            <Comment
            key={i}
      author={<a>{l?.username}</a>}
      style={{marginTop:10,padding:10,background:`rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.random()-0.3})`,borderRadius:5,boxShadow:'0 1px 4px rgba(0, 0, 0, 0.3)'}}
      avatar={<Avatar src={l?.userInfo?.avatar.replace(/public/,baseURL)} alt="Han Solo" />}
      content={
       <div style={{fontSize:13}}>
           <p>
         装修风格：{typeList.find((item:any)=>item.value==l.type)?.text}
        </p>
          <p>
         装修备注：{l.remark?l.remark:'暂无'}
        </p>
       </div>
      }
      datetime={
        <Tooltip  title={moment().format('YYYY-MM-DD HH:mm:ss')}>
          <span style={{color:'#000'}}>{moment(l.time).fromNow()}</span>
        </Tooltip>
    }
    />
        ))
        :<Empty />
}
         </div>
  )
    
}

export default observer(List)